<template>
	<div>
		<!--2.账号确权设置-->
		<div class="cont_two cont_tar">
			<div class="cont_two_view">
				<div class="cont_two_title">
					<span>作品文件:</span>
					<RadioGroup v-model="uploadRightStatus">
						<Radio label="upload">
							<span>仅上传文件</span>
						</Radio>
						<Radio label="uploadRight">
							<span>上传文件并在线确权</span>
						</Radio>
					</RadioGroup>
				</div>
				<div class="cont_two_titlefile">
					<div class="cont_two_fileview">
						<div class="cont_two_fileup" style="margin-right: 12px;overflow: hidden;margin-left:8px;">
							<Upload 
							:max-size="50*1024*1024"
							:default-file-list="defaultList"
							:on-success="handleSuccess"
							id="file_upload" action="//jsonplaceholder.typicode.com/posts/">
								<Button icon="ios-cloud-upload-outline">选择文件</Button>
							</Upload>
						</div>
						<span class="cont_two_filespan" style="width: 100%;color: #E94747;">上传大于 50M文件需购买存储空间，当前剩余大文件存储空间<span class="nowSpace">0</span>M</span>

					</div>
				</div>
				<div v-if="uploadRightStatus === 'uploadRight'">
					<div class="cont_two_wenjian" >
						<span>确权声明:</span>
						<div>
							<span>当前剩余确权数<span class="tsaCount">0</span>次</span>
						</div>
					</div>
					<div class="cont_two_wjtest">
						<div class="cont_two_fileview">
							<div class="cont_two_filetext cont_two_filetext2">
								作品《<span class="cont_two_filetext_spName">作品名称</span>》已申请TSA可信时间戳数字版权保护，版权均属<span class="cont_two_filetext_people">著作权人</span>所有，未经允许，任何单位及个人不得转载、摘编或以其它方式使用本作品。
							</div>

						</div>
					</div>
				</div>

				<div class="cont_one_btns">
					<div>
						<span class="cont_one_cancel" @click="backOneStep()">上一步</span>
						<span class="cont_one_next_step down_one next_step next_step1" @click="confirmToThree" target="cont_three">下一步</span>
						<span class="cont_one_next_step newsave" @click="saveBaseTwo">直接保存</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				// 确权状态
				uploadRightStatus:'upload',
				defaultList: [
//                     {
//                         'name': 'a42bdcc1178e62b4694c830f028db5c0',
//                         'url': 'https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar'
//                    },
                ],
			};
		},
		methods: {
			// 第二步到第三步
			confirmToThree(){
				//切换顶部的状态
				let statusValue = 'three';
				this.$emit("changestepstatus", statusValue);
			},
			// 第二步返回第一步
			backOneStep(){
				//切换顶部的状态
				let statusValue = 'one';
				this.$emit("changestepstatus", statusValue);
			},
			// 第二步直接保存
			saveBaseTwo(){
				this.$router.push({  //核心语句
					path:'/copyRight/warehouse',   //跳转的路径
					query:{           //路由传参时push和query搭配使用 ，作用时传递参数
						activeStatus:1 ,  
					}
				})
			},
			//文件上传成功
			handleSuccess (res, file) {
				console.log("文件上传成功res="+JSON.stringify(res))
				console.log("file="+file)
//                 file.url = 'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar';
//                 file.name = '7eb99afb9d5f317c912f08b5212fd69a';
            },
		},
		
		beforeMount: function() {
			// console.log("47")
		},
		mounted: function() {
			// console.log("7777777777")
		},
	}
</script>

<style type="less">
	.cont_one .cont_one_view {
		width: 620px;
		margin: 0 auto;
	}
	/* //账号确权设置 */
	.cont_two {
	    width: 100%;
	    font-size: 14px;
	}
	.cont_two_view {
		width: 741px;
		margin: 0 auto;
	}
	.cont_two_title {
		width: 100%;
		height: 20px;
		overflow: hidden;
		margin: 59px auto 15px;
	}
	.cont_two_title span {
		display: inline-block;
		line-height: 20px;
		vertical-align: top;
		height: 100%;
	}
	.cont_two_title div {
		display: inline-block;
		vertical-align: top;
		height: 100%;
	}
	.cont_two_title div input {
		display: inline-block;
		width: 16px;
		height: 16px;
		margin-left: 15px;
		line-height: 20px;
	}
	.cont_two_title div input:nth-child(1) {
		margin-left: 0;
	}
	.cont_two_title div span {
		line-height: 20px;
	}
	.cont_two_titlefile {
		width: 648px;
		min-height: 127px;
		border-radius: 3px;
		background: rgba(252, 252, 253, 1);
		margin-left: 93px;
	}
	.cont_two_fileview {
		width: 601px;
		padding: 16px 0;
		margin: 0 auto;
	}
	.cont_two_fileview input {
		width: 98px;
		height: 36px;
		background: rgba(96, 129, 255, 1);
		border-radius: 3px;
		font-size: 14px;
		line-height: 36px;
		color: #fff;
		vertical-align: middle;
	}
	.cont_two_fileview span {
		display: inline-block;
		margin-left: 5px;
		line-height: 36px;
		vertical-align: middle;
	}
	.cont_two_filetext {
		width: 100%;
		color: #999999;
		word-break: break-word;
		line-height: 22px;
		margin-top: 15px;
		margin-bottom: 32px;
	}
	.cont_two_filetexttwo {
		width: 100%;
//              color: #E94747;
		color:#999999;
		word-break: break-word;
		line-height: 22px;
		margin-top: 15px;
		margin-bottom: 16px;
	}
	.cont_two_wenjian {
		width: 100%;
		height: 20px;
		overflow: hidden;
		margin: 23px auto 15px;
	}
	.cont_two_wenjian span {
		display: inline-block;
		line-height: 20px;
		vertical-align: top;
		height: 100%;
		margin-right: 32px;
	}
	.cont_two_wenjian div {
		display: inline-block;
		vertical-align: top;
		height: 100%;
	}
	.cont_two_wenjian div span{
		{
			line-height: 20px;
		}
	}
	.cont_two_wenjian div span span {
		color: #6699FF;
		margin: 0 3px;
	}
	.cont_two_wjtest {
		width: 646px;
		min-height: 102px;
		background-color: rgba(255, 255, 255, 1);
		border-radius: 3px;
		margin-left: 93px;
		border: 1px solid rgba(240, 242, 248, 1);
	}
	.cont_two_wjtest .cont_two_fileview {
		width: 619px;
		padding: 12px 0;
		margin: 0 auto;
	}
	.cont_two_wjtest .cont_two_fileview .cont_two_filetext {
		width: 100%;
		color: #999999;
		word-break: break-word;
		line-height: 22px;
	}
	.cont_two_wjtest .cont_two_fileview .cont_two_filetext span {
		color: #6699FF;
	}
	.cont_one_btns {
		width: 100%;
		height: 42px;
		margin-top: 46px;
		margin-bottom: 53px;
	}
	.cont_one_btns div {
		width: 480px;
		margin: 0 auto;
		height: 100%;
	}
	.cont_one_btns div span {
		display: inline-block;
		border-radius: 3px;
		line-height: 42px;
		text-align: center;
	}
	.cont_one_cancel {
		width: 148px;
		height: 42px;
		background: rgba(255, 255, 255, 1);
		border: 1px solid rgba(227, 227, 227, 1);
		border-radius: 3px;
		cursor: pointer;
	}
	.cont_one_last_step {
		width: 146px;
		height: 40px;
		background: rgba(255, 255, 255, 1);
		border: #E3E3E3 1px solid;
		color: #999;
	}
	.cont_one_next_step {
		display: inline-block;
		width: 148px;
		height: 42px;
		background: rgba(96, 129, 255, 1);
		margin-left: 12px;
		color: #fff;
		cursor: pointer;
	}
	.cont_one .cont_one_view{
		width: auto;
	}
</style>
